
{block name="css"}

<link rel="stylesheet" type="text/css" href="__STATIC__/admin/hui/static/h-ui/css/H-ui.min.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/hui/static/h-ui.admin/css/H-ui.admin.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/hui/lib/Hui-iconfont/1.0.8/iconfont.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/hui/static/h-ui.admin/skin/default/skin.css" id="skin"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/common.css"/>
<link rel="stylesheet" type="text/css" href="__STATIC__/admin/css/app.css"/>

{CSS href="__STATIC__/w/admin_base.css" /}
{CSS href="__STATIC__/w/icon.css" /}
{CSS href="__STATIC__/w/layui.css" /}
{CSS href="__STATIC__/w/divtable.css" /}
{/block}

{block name="js"}
{js href='__STATIC__/w/jquery1110min.js' /}
{js href='__STATIC__/w/layui.js' /}
{js href='__STATIC__/w/ajax_file_upload.js' /}
{js href='__STATIC__/admin/hui/lib/layer/2.4/layer.js' /}
{/block}

{block name="body"}

<nav class="breadcrumb">
    <i class="Hui-iconfont">&#xe67f;</i> 首页
    <span class="c-gray en">&gt;</span> 微信素材
    <a class="btn radius btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新">
        <i class="Hui-iconfont">&#xe68f;</i>
    </a>
</nav>

<div class="layui-form-cont">

    <div class="layui-tab">
        <div class="layui-btn-group layui-title-upload">
            <button onclick="sycMaterial('image')" class="layui-btn radius layui-btn-normal"><i class="layui-icon">&#xe681;</i>同步图片</button>
            <button onclick="sycMaterial('news')" class="layui-btn radius "><i class="layui-icon">&#xe681;</i>同步图文</button>
            <button onclick="sycMaterial('voice')" class="layui-btn radius layui-btn-warm "><i class="layui-icon">&#xe681;</i>同步语音</button>
            <button onclick="sycMaterial('video')" class="layui-btn radius layui-btn-danger"><i class="layui-icon">&#xe681;</i>同步视频</button>
            <!--<button onclick="addMaterial()" class="layui-btn radius layui-btn-danger layui-btn-sm">+ 增加素材</button>-->
        </div>
    </div>

    <div class="layui-tab" style="margin-top: 20px;">
        <ul class="layui-tab-title">
            <li {eq name="fron_type" value="1"}class="layui-this"{/eq}><a href="{:url('index',['type'=>'image','from_type'=>1])}"> 微信服务器</a></li>
            <!--<li {eq name="fron_type" value="0"}class="layui-this"{/eq}><a href="{:url('index',['type'=>'image','from_type'=>0])}">本地素材</a></li>-->
        </ul>
    </div>

    <div class="layui-tab-content">

        <div class="layui-tab-item {eq name="fron_type" value="1"}layui-show{/eq}">

            <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">

                <ul class="layui-tab-title">
                    <li {eq name="type" value="image"}class="layui-this"{/eq}><a href="{:url('index',['type'=>'image','from_type'=>1])}">图片</a></li>
                    <li {eq name="type" value="news"}class="layui-this"{/eq}><a href="{:url('index',['type'=>'news','from_type'=>1])}">图文</a></li>
                    <li {eq name="type" value="voice"}class="layui-this"{/eq}><a href="{:url('index',['type'=>'voice','from_type'=>1])}">语音</a></li>
                    <li {eq name="type" value="video"}class="layui-this"{/eq}><a href="{:url('index',['type'=>'video','from_type'=>1])}">视频</a></li>
                </ul>

                <div class="layui-tab-content">

                    {switch name="type"}
                    {case value="news"}
                    <ul class="type_image">
                        {volist name="data" id="v"}
                        <li class="material_li">
                            <div class="material_li_box">
                                {volist name="v.news_item" id="news"}
                                {if condition="$key eq '0'"}
                                <div class="material_li_t">
                                    <p>{$news.title}</p>
                                    <img width="169" height="140" src="{$news.thumb_url}">
                                </div>
                                {else /}
                                <div class="material_li_b">
                                    <div class="layui-row">
                                        <div class="layui-col-xs9">
                                            <p>{$news.title}</p>
                                        </div>
                                        <div class="layui-col-xs3">
                                            <img width="30" height="30" src="{$news.thumb_url}">
                                        </div>
                                    </div>
                                </div>
                                {/if}
                                {/volist}
                            </div>

                            <div>
                                <div class="layui-btn-group">
                                    <button onclick="sendMaterial('{$v.media_id}','image')" style="width: 50%" class="layui-btn radius layui-btn-primary layui-btn-sm">
                                        <i class="layui-icon">&#xe609;</i>群发
                                    </button>
                                    <button onclick="delMaterial('{$v.media_id}','image')" style="width: 50%;" class="layui-btn radius layui-btn-primary layui-btn-sm">
                                        <i class="layui-icon">&#x1006;</i>删除
                                    </button>
                                </div>
                            </div>
                        </li>
                        {/volist}
                    </ul>
                    {$page}
                    {/case}

                    {case value="voice"}
                    <table class="layui-table" lay-skin="line">
                        <thead>
                        <tr>
                            <th>语音名称</th>
                            <th>媒体 ID</th>
                            <th>创建时间</th>
                            <th>操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        {volist name="data" id="vo"}
                        <tr>
                            <td>{$vo.title}</td>
                            <td>{$vo.media_id}</td>
                            <td>{$vo.create_time}</td>
                            <td>
                                <div class="">
                                    <button onclick="delMaterial('{$vo.media_id}','voice')" class="layui-btn radius layui-btn-xs layui-btn-danger">
                                        <i class="layui-icon">&#xe640;删除</i>
                                    </button>
                                </div>

                            </td>
                        </tr>
                        {/volist}
                        </tbody>
                    </table>
                    {$data->render()}
                    {/case}

                    {case value="image"}
                    <ul class="type_image">
                        {volist name="data" id="v"}
                        <li class="material_li">
                            <span><img src="{$v.url}" width="169" height="169"></span>
                            <span>
                                <div class="layui-btn-group">
                                  <button onclick="sendMaterial('{$v.media_id}','image')" style="width: 50%" class="layui-btn radius layui-btn-normal">
                                    <i class="layui-icon">&#xe609;</i>群发
                                  </button>
                                  <button onclick="delMaterial('{$v.media_id}','image')" style="width: 50%;" class="layui-btn radius layui-btn-danger">
                                    <i class="layui-icon">&#x1006;</i>删除
                                  </button>
                                </div>
                            </span>
                        </li>
                        {/volist}
                    </ul>
                    {$data->render()}
                    {/case}

                    {case value="video"}
                    <table class="layui-table" lay-skin="line">
                        <thead>
                            <tr>
                                <th>视频名称</th>
                                <th>媒体 ID</th>
                                <th>创建时间</th>
                                <th>操作</th>
                            </tr>
                        </thead>

                        <tbody>
                            {volist name="data" id="vo"}
                            <tr>
                                <td>{$vo.title}</td>
                                <td>{$vo.media_id}</td>
                                <td>{$vo.create_time}</td>
                                <td>
                                    <div class="">
                                        <button onclick="delMaterial('{$vo.media_id}','video')" class="layui-btn radius layui-btn-xs layui-btn-danger">
                                            <i class="layui-icon">&#xe640;删除</i>
                                        </button>
                                    </div>

                                </td>
                            </tr>
                            {/volist}
                        </tbody>
                    </table>
                    {$data->render()}
                    {/case}
                    {/switch}
                </div>

            </div>

        </div>

        <div class="layui-tab-item {eq name="fron_type" value="0"}layui-show{/eq}"><!--内容2--></div>

    </div>

</div>

<script>
    function sendMaterial(media_id,type) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('你确定需要群发吗？认证号可用、订阅号一天1条，服务号一个月四条。', {
                btn: ['是','不'] //按钮
            }, function(){
                $.post("{:url('sendMaterial')}",{'media_id':media_id,'type':type},function (res) {
                    if(res.status==1){
                        layer.alert(res.msg);
                    }else{
                        layer.alert(res.msg);
                    }

                })
            }, function(){

            });
        });

    }
    function delMaterial(media_id,type) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.confirm('你确定需要删除吗？', {
                btn: ['是','不'] //按钮
            }, function(){
                $.post("{:url('delMaterial')}",{'media_id':media_id,'type':type},function (res) {
                    if(res.status==1){
                        layer.alert(res.msg)
                    }else{
                        layer.alert(res.msg)
                    }
                })
            }, function(){

            });
        });

    }
    function sycMaterial(type) {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                title: '正在同步',
                shadeClose: true,
                shade: 0.5,
                area: ['680px', '200px'],
                content: '{:url("sycMaterial","","")}/type/'+type+'/offset/0',
                cancel: function(index, layero){
                    window.location.reload();
                }
            })
        });
    }

    function addMaterial() {
        layui.use('layer', function(){
            var layer = layui.layer;
            layer.open({
                type: 2,
                area: ['700px', '450px'],
                fixed: false, //不固定
                maxmin: true,
                content: "{:url('addMaterial')}"
            });
        });

    }
</script>

<style>
.content li.material_li{height:auto}
.content .type_image li{float:left;}
li.material_li .material_li_box .material_li_t{position: relative;}
li.material_li .material_li_box .material_li_t img{display: block;}
li.material_li .material_li_box .material_li_t p{color: #fff;position: absolute;background: rgba(0,0,0,0.7);bottom: 0px;left: 0px;right: 0px;padding: 4px;font-size: 12px;line-height: 16px;}
.type_image .layui-btn-group{width: 100%;}
.material_li_b{border-top: 1px solid #eee;padding-top: 4px;padding-bottom: 4px;}
.material_li_b img{float: right; margin: 5px;}
.material_li_b p{padding-left: 5px;font-size: 12px;}
</style>
{/block}